<!-- 非法端口 -->
<template>
  <div class="dashboard-editor-container">
    <el-row style="background: #fff; padding: 16px;">
      <div style="display:flex;justify-content:space-between;">
        <div>
          <el-button type="primary" icon='el-icon-circle-plus-outline' @click="addClick()">添加规则</el-button>
          <span style="color:#d2d7e3;font-size:25px;margin-top:10px;padding-left:10px;">
            <el-tooltip class="item" effect="dark" placement="right">
              <i class="el-icon-question"></i>
              <div style="width: 420px;" slot="content">通过拖动表格行来重新排列顺序,
                系统按次序从上到下优先级执行。终端找到一条匹配的规则后将不再向下继续匹配规则。匹配不到规则将使用默认策略。</div>
            </el-tooltip>
          </span>
        </div>
      </div>
      <el-table stripe border :data="tableData" class="draggable-table" row-key="RuleName" height="calc(100vh - 155px)"
        style="width: 100%; margin-top: 15px">
        <el-table-column label="序号" width="60" type="index"
          :index='(index) => { return (index + 1) + (this.pageNum - 1) * this.pageSize }'> </el-table-column>
        <el-table-column label="规则名称" prop="RuleName" show-overflow-tooltip width="160px"></el-table-column>
        <el-table-column label="应用对象类型" show-overflow-tooltip prop="DeviceObjType" width="120px">
          <template slot-scope="{row}">
            <span>{{ DeviceObjTypeFormatter(row) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="应用对象" show-overflow-tooltip prop="DeviceObj" width="160px">
          <template slot-scope="{row}">
            <span>{{ getDeviceObjDisplay(row, DepartmentList, AssetsList) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="规则生效" show-overflow-tooltip prop="IsValid" width="160px">
          <template slot-scope="{row}">
            <span style="color:#67C23A" v-if="row.IsValid === 1" type="success">生效</span>
            <span style="color:#F56C6C" v-else type="danger">停用</span>
          </template>
        </el-table-column>
        <el-table-column label="备注信息" show-overflow-tooltip prop="Descp"></el-table-column>
        <el-table-column label="执行方案" show-overflow-tooltip prop="ExecuteMode">
          <template slot-scope="{row}">
            <span v-if="row.ExecuteMode === 1" type="success">立即执行</span>
            <span v-else type="danger">用户决策</span>
          </template>
        </el-table-column>
        <el-table-column label="执行频率" show-overflow-tooltip prop="CheckType">
          <template slot-scope="{row}">
            <span v-if="row.CheckType == 0" type="danger">每天</span>
            <span v-if="row.CheckType == 1" type="danger">每周{{ daysOfWeek(row.DayWeek) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="执行时间" show-overflow-tooltip prop="CheckType">
          <template slot-scope="{row}">
            <span v-if="row.CheckType == 0" type="danger">{{ row.time }}</span>
            <span v-if="row.CheckType == 1" type="danger">{{ row.time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="核查项目数量" show-overflow-tooltip prop="Descp">
          <template slot-scope="{row}">
            <span v-if="row.checkitem[0] == 0" type="danger">{{ AllIds.length }}</span>
            <span v-else type="danger">{{ row.checkitem.length }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="changeClick(scope.row, scope.$index)">修改</el-button>
            <el-button size="mini" type="danger" @click="deleteClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-dialog top="5vh" :close-on-click-modal="false" :close-on-press-escape=false
      :title="Action === 1 ? '添加规则' : '修改规则'" :visible.sync="dialogVisible" v-el-drag-dialog width="800px">
      <el-form label-width="130px" :model="accountForm" :rules="rules" ref="accountForm">
        <el-row class="ruleMain">
          <el-divider content-position="left">规则基本内容</el-divider>
          <el-col :xs="24" :sm="24" :lg="24">
            <el-form-item label='规则名称：' prop="RuleName">
              <el-input v-model.trim="accountForm.RuleName" :disabled="Action !== 1" :maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label='规则状态：' prop="IsVaclid">
              <el-radio v-model="accountForm.IsValid" :label="1">正常</el-radio>
              <el-radio v-model="accountForm.IsValid" :label="0">失效</el-radio>
            </el-form-item>
            <device-object-selector :form.sync="accountForm" />
            <el-form-item label="备注信息：" prop="Descp">
              <el-input placeholder="请输入备注" type="textarea" maxlength="50" :rows="3"
                v-model="accountForm.Descp"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="ruleOther">
          <el-col :xs="24" :sm="24" :lg="24">
            <el-divider content-position="left">规则策划内容</el-divider>
            <el-form-item label="执行频率：" prop="CheckType">
              <el-radio-group v-model="accountForm.CheckType">
                <el-radio :label="0">每天</el-radio>
                <el-radio :label="1">每周</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="accountForm.CheckType === 0" label="每天：">
              <el-select v-model="accountForm.dailyHour" style="width: 100px; margin-right: 10px">
                <el-option v-for="hour in options1" :key="hour" :label="hour" :value="hour"></el-option>
              </el-select>
              <span style="margin-right: 10px">时</span>
              <el-select v-model="accountForm.dailyMinute" style="width: 100px; margin-right: 10px">
                <el-option v-for="minute in options2" :key="minute" :label="minute" :value="minute"></el-option>
              </el-select>
              <span style="margin-right: 10px">分</span>
            </el-form-item>
            <el-form-item v-if="accountForm.CheckType === 1" label="每周:">
              <el-select v-model="accountForm.weeklyDay" style="width: 100px; margin-right: 10px">
                <el-option label="星期一" value="1"></el-option>
                <el-option label="星期二" value="2"></el-option>
                <el-option label="星期三" value="3"></el-option>
                <el-option label="星期四" value="4"></el-option>
                <el-option label="星期五" value="5"></el-option>
                <el-option label="星期六" value="6"></el-option>
                <el-option label="星期日" value="0"></el-option>
              </el-select>
              <el-select v-model="accountForm.dailyHour" style="width: 100px; margin-right: 10px">
                <el-option v-for="hour in options1" :key="hour" :label="hour" :value="hour"></el-option>
              </el-select>
              <span style="margin-right: 10px">时</span>
              <el-select v-model="accountForm.dailyMinute" style="width: 100px; margin-right: 10px">
                <el-option v-for="minute in options2" :key="minute" :label="minute" :value="minute"></el-option>
              </el-select>
              <span style="margin-right: 10px">分</span>
            </el-form-item>
            <el-form-item label='执行方案：' prop="ExecuteMode">
              <el-radio v-model="accountForm.ExecuteMode" :label="1">立即执行</el-radio>
              <el-radio v-model="accountForm.ExecuteMode" :label="2">用户决策</el-radio>
            </el-form-item>
          </el-col>
          <el-col :xs="19" :sm="19" :lg="19">
            <el-form-item label='核查指定项目：' prop="screenTime">
              <el-button type="primary" @click="changeModel()">选择核查项目</el-button>
              <span style="color:#aaa;">
                （默认全部核查）
              </span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="24">
            <el-form-item label='核查项目：' prop="screenTime">
              <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 3 }" resize="none" v-model="selectInfo"
                disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-divider></el-divider>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button type="info" @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog top="5vh" :close-on-click-modal="false" :close-on-press-escape=false title="核查指定项目"
      :visible.sync="dialogObjVisible" v-el-drag-dialog width="800px">
      <!-- <el-tabs type="border-card" v-model="activeTab"> -->
      <!-- <el-tab-pane label="终端安全策略检查" name="tab1"> -->
      <!-- <el-table ref="multipleTable" stripe border :data="baselineTable" style="width: 100%; margin-top: 15px"
            height="440px" @selection-change="handleSelectionChange">
            <el-table-column label="序号" width="60" type="index" prop="id"></el-table-column>
            <el-table-column type="selection" width="60"></el-table-column>
            <el-table-column label="核查项目" show-overflow-tooltip prop="Subject" ></el-table-column>
          </el-table> -->
      <el-cascader-panel v-model="baselineList" :options="baselineTable" :props=props
        class="custom-cascader"></el-cascader-panel>
      <!-- </el-tab-pane> -->
      <!-- <el-tab-pane label="软件安全检查">
          <el-table ref="multipleTable2" stripe border :data="baselineTable2" style="width: 100%; margin-top: 15px" height="440px" @selection-change="handleSelectionChange2">
            <el-table-column label="序号" width="60" type="index" prop="id"></el-table-column>
            <el-table-column type="selection" width="60"></el-table-column>
            <el-table-column label="核查项目" show-overflow-tooltip prop="Subject" ></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="补丁安装检查">
          <el-table ref="multipleTable2" stripe border :data="baselineTable2" style="width: 100%; margin-top: 15px" height="440px" @selection-change="handleSelectionChange2">
            <el-table-column label="序号" width="60" type="index" prop="id"></el-table-column>
            <el-table-column type="selection" width="60"></el-table-column>
            <el-table-column label="核查项目" show-overflow-tooltip prop="Subject" ></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="防病毒软件检查">
          <el-table ref="multipleTable2" stripe border :data="baselineTable2" style="width: 100%; margin-top: 15px" height="440px" @selection-change="handleSelectionChange2">
            <el-table-column label="序号" width="60" type="index" prop="id"></el-table-column>
            <el-table-column type="selection" width="60"></el-table-column>
            <el-table-column label="核查项目" show-overflow-tooltip prop="Subject" ></el-table-column>
          </el-table>
        </el-tab-pane> -->
      <!-- </el-tabs> -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="checkData">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { connrequest } from '@/api/firstPage'
import { getDeviceObjDisplay, DeviceObjTypeFormatter, findItem } from '@/utils/index.js';
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import Sortable from "sortablejs";
import DeviceObjectSelector from '@/components/DeviceObjectSelector'
export default {
  directives: { elDragDialog },
  components: {
    DeviceObjectSelector
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      tableData: [],
      RoleList: [],
      AssetsList: [],
      DepartmentList: [],
      baselineList: [],
      Action: 1,
      dialogVisible: false,
      dialogObjVisible: false,
      accountForm: {
      },
      DeviceObjList: [],
      BaselineResultList: [],
      rules: {
        RuleName: [
          { required: true, message: "请输入规则名称" }
        ],
      },
      selectInfo: '',
      options1: [],
      options2: [],
      baselineTable: [],
      AllIds: [],
      baselineTable2: [],
      props: { emitPath: false, checkStrictly: false, multiple: true, label: "Subject", value: "id", children: 'SubClass', expandTrigger: 'hover' },
      multipleSelection: [],
      checkitem: [],
      example: [],
      activeTab: 'tab1',
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    for (let hour = 0; hour < 24; hour++) {
      if (hour < 10) hour = "0" + hour;
      else hour = String(hour);
      this.options1.push(hour);
    }
    for (let hour = 0; hour < 60; hour++) {
      if (hour < 10) hour = "0" + hour;
      else hour = String(hour);
      this.options2.push(hour);
    }
    this.GetDepartment()
    this.GetDevice()
    this.getData()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.initSort();
  },
  methods: {
    DeviceObjTypeFormatter,
    getDeviceObjDisplay,
    // 获取所有部门
    async GetDepartment() {
      const res = await connrequest('GetDepartment')
      this.DepartmentList = res.Data
    },
    // 获取所有资产
    async GetDevice() {
      const data = {
        Paging: {
          QueryPageNo: 1,
          QueryPageLength: 100000
        },
      }
      const res = await connrequest('GetDevice', data)
      this.AssetsList = res.Data
    },
    initSort() {
      const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      // 根据具体需求配置options配置项
      const sortable = new Sortable(el, {
        animation: 500, // 拖拽时的动画时长
        onEnd: async (evt) => { // 监听拖动结束事件
          // 下面将拖拽后的顺序进行修改
          const currRow = this.tableData.splice(evt.oldIndex, 1)[0]
          this.tableData.splice(evt.newIndex, 0, currRow)
          const newData = []
          this.tableData.forEach((item, index) => {
            newData[index] = {
              id: item.id,
              rank: index + 1
            }
          })
          const data = {
            Data: {
              OpFile: 5,
              List: [...this.tableData]
            }
          }
          const res = await connrequest('ReorderList', data)
          if (res.Status.StatusCode === 0) {
            this.$message.success('排序成功')
            this.getData()
          }
        }
      })
    },
    daysOfWeek(dayIndex) {
      const days = ['日', '一', '二', '三', '四', '五', '六'];
      return days[dayIndex];
    },
    // 获取选择了哪些
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSelectionChange2(val) {
      // this.multipleSelection = val
    },
    async getData() {
      // GetListenPortRule
      const res = await connrequest("GetBaseLineCheck");
      res.Data = res.Data || [];
      res.Data.forEach(item => {
        // item.CheckType = item.CheckType != 2 ? 0 : item.CheckType || 0;
        // item.CheckType = item.CheckType !== 2 ? 0 : item.CheckType || 0;
        item.time = item.time || "00:00";
        item.dailyHour = item.time.slice(0, 2);
        item.dailyMinute = item.time.slice(3);
        if (item.DayWeek == undefined) item.DayWeek = "1";
        item.weeklyDay =
          item.DayWeek === 7 ? "1" : String(item.DayWeek);
        item.checkitem = item.checkitem || [0]
      })
      this.tableData = res.Data
      const resD = await connrequest("GetBaselineFixSet");
      resD.Data.map(item => {
        item.Subject = item.MainClass
        return item
      })
      this.baselineTable = resD.Data;
      this.AllIds = this.getAllIds(resD.Data, 'id')
    },
    getAllIds(data, key) {
      // 使用 reduce 来遍历数组并收集所有 id
      const ids = data.reduce((acc, item) => {
        // 从每个 SubClass 数组中提取 id
        const subClassIds = item.SubClass.map(subItem => subItem[key]);
        // 将提取的 id 添加到累加器中
        return [...acc, ...subClassIds];
      }, []);
      return ids;
    },
    checkData() {
      this.dialogObjVisible = false
      this.checkitem = this.getItemid(this.baselineList)
      this.accountForm.checkitem = this.checkitem
      return
    },
    getItemid(table) {
      this.selectInfo = ''
      if (table.length == this.AllIds.length) {
        this.selectInfo = '全部核查'
        return [0]
      }
      var val = []
      table.forEach(item => {
        this.selectInfo += findItem(this.baselineTable, 'SubClass', 'id', item, 'Subject')+ "、"
        val.push(parseInt(item))
      })
      this.selectInfo = this.selectInfo.slice(0, -1)
      val.sort((a, b) => a - b);
      return val
    },
    changeModel() {
      this.activeTab = 'tab1'
      this.baselineList = this.accountForm.checkitem?.[0] == 0 ? this.AllIds : this.accountForm?.checkitem
      this.dialogObjVisible = true
      // this.GetBaselineFixSet();
    },
    async GetBaselineFixSet() {
      const res = await connrequest("GetBaselineFixSet");
      this.baselineTable = res.Data.BaselineResult;
      if (this.accountForm.checkitem?.[0] == 0)
        this.selectAllRows()
      else {
        this.checkitem = this.accountForm.checkitem
        this.selectItemRows()
      }
    },
    // isDisabled(){
    //   if(this.accountForm.CheckType === 2)
    //     return 0
    //   else
    //     return 1
    // },
    selectAllRows() {
      if (this.$refs.multipleTable) {
        // 选择所有行
        this.$nextTick(() => {
          this.$refs.multipleTable.toggleAllSelection(); // 手动选中所有行
        });

      }
    },
    selectItemRows() {
      // 选择指定行
      this.$nextTick(() => {
        this.checkitem.forEach(index => {
          this.$refs.multipleTable.toggleRowSelection(this.baselineTable[index - 1], true);
        });
      });
    },
    addClick() {
      this.Action = 1;
      this.selectInfo = ''
      this.$nextTick(() => {
        // 等待组件挂载
        if (this.$refs['accountForm']) {
          this.accountForm = {
            IsValid: 1,
            DeviceObjType: 1,
            dailyHour: "00",
            dailyMinute: "00",
            CheckType: 0,
            weeklyDay: "1",
            ExecuteMode: 1,
            DeviceObj: [],
            checkitem: [0]
          };
          this.$refs['accountForm'].resetFields();
        } else {
          this.accountForm = {
            IsValid: 1,
            DeviceObjType: 1,
            dailyHour: "00",
            dailyMinute: "00",
            CheckType: 0,
            weeklyDay: "1",
            ExecuteMode: 1,
            DeviceObj: [],
            checkitem: [0]
          };
        }
        this.selectDetail()
        this.dialogVisible = true;
      });
    },
    changeClick(row, index) {
      this.Action = 2
      this.$nextTick(() => {
        this.accountForm = { ...row }
        this.$refs['accountForm'].resetFields();
        this.selectDetail()
      })
      this.dialogVisible = true
    },
    selectDetail() {
      this.selectInfo = ''
      this.accountForm.checkitem.forEach(item => {
        if (item == 0) {
          this.selectInfo += '全部核查'
          return
        }
        else {
          this.selectInfo += findItem(this.baselineTable, 'SubClass', 'id', item, 'Subject')+ "、"
        }
      })
    },
    deleteClick(row) {
      this.$confirm('此操作将永久删除该规则, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let data = {
          Data: {
            Action: 3,
            Detail: { ...row }
          }
        }
        const res = await connrequest('EditBaseLineCheck', data)
        if (res.Status.StatusCode === 0) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getData()
          this.dialogVisible = false
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    submit() {
      // this.checkitem = 
      // return
      // var time = this.accountForm.dailyHour + ":" + this.accountForm.dailyMinute;
      let data = {};
      this.$refs['accountForm'].validate(async (valid) => {
        if (valid) {
          if (this.accountForm.DeviceObjType === 2) {
            if (!this.accountForm.DeviceObj || this.accountForm?.DeviceObj?.length === 0) {
              this.$message.error('请选择部门')
              return false
            }
          }
          if (this.accountForm.DeviceObjType === 8) {
            if (!this.accountForm.DeviceObj || this.accountForm?.DeviceObj?.length === 0) {
              this.$message.error('请选择角色')
              return false
            }
          }
          if (this.accountForm.DeviceObjType === 6) {
            if (!this.accountForm.DeviceObj || this.accountForm?.DeviceObj?.length === 0) {
              this.$message.error('请选择资产')
              return false
            }
          }
          const time = `${this.accountForm.dailyHour}:${this.accountForm.dailyMinute}`;
          const datas = {
            Data: {
              // CheckType: this.accountForm.CheckType === 2 ? this.accountForm.CheckType : this.accountForm.CheckType,
              time,
              DayWeek: this.accountForm.CheckType === 0 ? 7 : parseInt(this.accountForm.weeklyDay),
              checkitem: this.accountForm.checkitem.length === 0 ? [0] : this.accountForm.checkitem
            },
          };
          // if (this.accountForm.CheckType === 2) {
          //   datas.Data.checkitem = [0]; // Set default checkitem when CheckType is 2
          // }
          this.accountForm = {
            ...this.accountForm,
            ...datas.Data
          }
          delete this.accountForm.dailyHour
          delete this.accountForm.dailyMinute
          delete this.accountForm.weeklyDay
          let data = {
            Data: {
              Action: this.Action,
              Detail: { ...this.accountForm }
            }
          }
          try {
            const res = await connrequest('EditBaseLineCheck', data)
            if (res.Status.StatusCode === 0) {
              this.$message.success(this.Action === 1 ? '添加成功' : '修改成功')
              this.getData()
              this.dialogVisible = false
            }
          } catch (error) {
            this.accountForm = {
              dailyHour: "00",
              dailyMinute: "00",
              weeklyDay: "1",
              ...this.accountForm
            };
          }
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
@import url('./components/css/conncss.scss');


::v-deep .el-scrollbar__wrap {
  height: 500px;
}
